<template>
    <div class="container-content detail">
        <div class="detail-container">
            <el-row>
                <el-col :span="24">
                    <h3 class="panel-title"></h3>
                </el-col>
            </el-row>
            <el-descriptions
                class="detail-descriptions"
                title="产品详情"
                :column="1"
                border
                colon
            >
                <template slot="extra">
                    <el-button
                        type="danger"
                        size="small"
                        icon="el-icon-delete"
                        plain
                        @click="deleteItem"
                    ></el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label"> 仓库名称 </template>
                    {{ formObject.wareName || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 出入库数量 </template>
                    {{ formObject.number || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 出入库签收人 </template>
                    {{ formObject.signUserId || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 出入库类型 </template>
                    <el-tag v-if="formObject.type == 1">入库</el-tag>
                    <el-tag v-else-if="formObject.type == 2">出库</el-tag>
                    <span v-else>--</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 创建时间 </template>
                    {{ formObject.createTime || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 更新时间 </template>
                    {{ formObject.changeTime || "--" }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>
<script>
import { getDetailProList, deleteProductList } from "@/api/system/warehouse";
export default {
    data() {
        return {
            formObject: {
                changeTime: "",
                createTime: "",
                id: "",
                materialId: "",
                number: "",
                signUserId: "",
                token: "",
                type: "",
                warehouseId: "",
            },
        };
    },
    methods: {
        getData(id) {
            getDetailProList(id).then((res) => {
                if (res.code === 200) {
                    let data = res.data;
                    Object.keys(this.formObject).forEach((key) => {
                        this.formObject[key] = data[key];
                    });
                }
            });
        },

        deleteItem() {
            this.$confirm("请确定要删除此方案吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteProductList(this.id).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.$router.push({
                                path: "/Warehouse/Product",
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
    created() {
        this.getData(this.id);
    },
};
</script>
<style lang="scss" scoped>
.detail-bg {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.detail {
    background: #f1f4f5;
    height: 100%;
}
.detail-container {
    width: 98%;
    margin: 1%;
    background: #fff;
    z-index: 3;
    position: relative;
    border-radius: 10px;
    padding: 20px;
}
.detail-descriptions {
    padding-left: 40px;
    padding-right: 40px;
}
::v-deep .el-descriptions-item__label.is-bordered-label {
    width: 20%;
}
</style>
